<template>
    <div class="person">
        <p>watch情况三:监视【reactive】定义的【响应式对象】。</p>
        <hr>
        <p>当前人的信息:</p>
        <p>姓名:{{ person.name }}</p>
        <p>年龄:{{ person.age }}</p>
        <p>s年龄:{{ person.deepAge.a.age }}</p>
        <button @click="changeName">改姓名</button>
        <button @click="changeSAge">改s年龄</button>
        <button @click="changeForeignAge">改年龄</button>
        <button @click="changePerson">改整个人</button>
    </div>
</template>
<script setup lang="ts" name="Person">
import { reactive, watch } from 'vue'
//数据
let person = reactive({
    name: '张三',
    age: 18,
    deepAge: {
        a:{
            age:20
        }
    }
})
function changeName(){
    person.name +='~'
}
function changeForeignAge(){
    person.age +=1
}
function changeSAge(){
    person.deepAge.a.age +=1
}
function changePerson(){
    Object.assign(person,{name:'里斯',age:80})
}
//  情况三:监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
watch(person,(newValue, oldValue) => {
    console.log('person', newValue, oldValue)
})
</script>


<style lang="scss" scoped></style>